<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js" charset="utf-8"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="css/iconfont3.css" />
		<link rel="stylesheet" href="./base.css" />
		<style>
			html{
				width: 100%;
				height: 100%;
			}
			body{
				width: 100%;
				height: 100%;
			}
			.navTop{
				width: 100%;
				height: 80px;
				margin-bottom: 50px;
				display: flex;
				justify-content: flex-end;
			}
			.navTop>div{
				height: 80px;
				line-height: 80px;
				text-align: center;
			}
			.nav-icon{
			position: relative;
			}
			.nav-menu>div{
				position: absolute;
				width:180px ;
				height: 150px;
				border-radius: 7px;
				border: 1px solid red;
				left: -80px;
				top: 80px;
				
				display: none;
			}
			.nav-user>div{
				position: absolute;
				width: 300px;
				height: 90px;
				border-radius: 7px;
				left: -240px;
				top: 80px;
					display: none;
			}
			.sign{
				border-radius: 12px;border: 1px solid white;width: 65px;height:25px;
				color: #B2B2B2;
			}
			.main{
				width: 800px;
				height: 300px;
				margin: 0 auto;
			
			}
			.main-img{
				width: 450px;
				height: 150px;
				
				margin:0 auto;
			}
			.search{
				margin-top: 10px;
				width: 100%;
				height: 50px;
				position: relative;
			}
			.search-input{
				border-color:  #B2B2B2 ;
				width: 100%;
				height: 50px;
				padding-left: 50px;
				padding-right: 50px;
			}
			.search>i{
				color:  #B2B2B2 ;
				font-size: 25px;
				position: absolute;
			}
			.xl{
				top: 10px;
				left: 10px;
			}
			.ss{
				top: 5px;
				left: 760px;
			}
			.sl{
				top: 10px;
				left: 10px;
				display: none;
			}
			.xl-menu{
				width: 100%;
				height:350px ;
				border: 1px solid #B2B2B2 ;
				display: none;
				
			}
			.xl-menu-item{
				padding-top: 10px;
				width: 770px;
				height: 100px;
				margin: 0 auto;
				border-top: 1px solid #B2B2B2 ;
			}
			.xl-menu-item1{
				padding-top: 10px;
				width: 770px;
				height: 100px;
				margin: 0 auto;
			
			}
			.xl-menu-title{
				width: 100%;
				height: 48%;
			
				font-size: 18px;
			}
			.xl-menu-content{
				width: 100%;
				height: 48%;
				
				font-size: 13px;
				color: #B2B2B2;
			}
			.xl-menu-content span{
				margin-right: 20px;
			}
			.input-menu{
				width: 100%;
				height:350px ;
				border: 1px solid #B2B2B2 ;
				display: none;
				
			}
			.input-menu-item{
				padding-top: 10px;
				width: 770px;
				height: 100px;
				margin: 0 auto;
				border-top: 1px solid #B2B2B2 ;
			}
			.input-menu-item1{
				padding-top: 10px;
				width: 770px;
				height: 100px;
				margin: 0 auto;
			
			}
			.input-menu-title{
				width: 100%;
				height: 48%;
			
				font-size: 18px;
			}
			.input-menu-content{
				width: 100%;
				height: 48%;
				
				font-size: 13px;
				color: #B2B2B2;
			}
			.input-menu-content span{
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 顶部导航栏 -->
		<div class="navTop">
			<div style="width: 100px" class="nav-item">关于我们</div>
			<div style="width: 100px"  class="nav-icon nav-collection">
				<i class="iconfont icon-shoucang "  style="font-size: 23px;"></i>
				
			</div>
			<div style="width: 100px"  class="nav-icon nav-menu">
				<i class="iconfont icon-caidan1 "  style="font-size: 23px;"></i>
				<div >
					
				</div>
			</div>
			<div style="width: 100px" class="nav-icon nav-user" >
				<i class="iconfont icon-yonghu1 "  style="font-size: 28px;"></i>
				<div>
					<div style="width: 100%;height:90px;display: flex;background-color: DeepSkyBlue;border-radius: 7px;">
						<div style="width: 70%;height: 100%;display: flex;">
							<img src="img/cat.jpg" style="height: 70px;width: 70px;margin: 5px;"/>
							<div style="height: 70px;width: 240px;margin: 5px;text-align: left;color: white;line-height: 20px;">
								<span style="font-weight: bolder;font-size: 16px;">游客</span>
								
							</div>
						</div>
						<div style="width: 30%;height: 100%;">
							<button class="sign">登录</button>
						</div>
					</div>
				</div>
			</div>	
		</div>
		
		<!-- 主题区域 -->
		<div class="main">
			<div class="main-img">
				<img src="img/世纪恒祥.png" style="width: 100%;height: 100%;"/>
			</div>
			<div class="search">
				<i class="iconfont icon-xiala xl"></i>
				<i class="iconfont icon-shangla   sl"></i>
				<i class="iconfont icon-tubiao- ss"></i>
				<input class="search-input"/>
				<!-- 下拉图标菜单 -->
				<div class="xl-menu ">
					<div class="xl-menu-item1">
						<div class="xl-menu-title">前端开发</div>
						<div class="xl-menu-content">
							<span >HTML</span>
							<span >CSS</span>
							<span >Js</span>
						</div>
					</div>
					<div class="xl-menu-item">
						<div class="xl-menu-title">C#开发</div>
						<div class="xl-menu-content">
							<span >.net MVC</span>
							<span >EntityFrameWork</span>
							
						</div>
					</div>
					
				</div>
			<!-- 下拉输入菜单 -->
				<div class="input-menu">
					<div class="input-menu-item1">
						<div class="input-menu-title">前端开发</div>
						<div class="input-menu-content">
							<span >HTML</span>
							<span >CSS</span>
							<span >Js</span>
						</div>
					</div>
					<div class="input-menu-item">
						<div class="input-menu-title">C#开发</div>
						<div class="input-menu-content">
							<span >.net MVC</span>
							<span >EntityFrameWork</span>
														
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<script>
			$(function(){
				$(".nav-icon").hover(function(){
					$(this).css("color","#007DDB")
					$(this).children().eq(1).fadeIn();
				},function(){
					$(this).css("color","")
					$(this).children().eq(1).fadeOut();
				})
				
				$(".sign").hover(function(){
					$(this).css({
						"cursor":"pointer",
						"color":"black"
					})
				},function(){
					$(this).css({
						
						"color":"#B2B2B2"
					})
				})
				
				$("i").hover(function(){
					$(this).css({
						"cursor":"pointer",
						"color":"black"
					})
				},function(){
					$(this).css({
						
						"color":"#B2B2B2"
					})
				})
				
				
				$(".xl-menu-content span").hover(function(){
					$(this).css({
						"cursor":"pointer",
						"color":"black"
					})
				},function(){
					$(this).css({
						
						"color":"#B2B2B2"
					})
				})
				
				$(".xl").click(function(){
					$(this).hide()
					$(".xl-menu").toggle()
					$(".sl").toggle()
				})
				$(".sl").click(function(){
					$(this).hide()
					$(".xl-menu").toggle()
					$(".xl").toggle()
				})
				$(".xl-menu-content span").click(function(){
					let content="";
					let newcontent="";
					let title="";
					content=$(".search-input").val();
					title=$(this).html();
					console.log(title)
					newcontent=content.slice(-1)
					console.log(newcontent)
					if(newcontent==","){
						$(".search-input").val(content+title+",");
					}
					else{
						if(newcontent==""){
							$(".search-input").val(content+title+",");
						}
						else{
							$(".search-input").val(content+","+title+",");
						}
					}
					
					
				})
			
			})
		</script>
	</body>
</html>
